<template>
<div class="detail-container">
    <div class="detail-total">
        <div class="title-money">
            <span class="cont1">
                <slot name="title">
                    <i  class="icon-wallet"></i>
                    <span>收入合计</span>   
                </slot>
            </span>

            <span class="cont2" @click="collpse">
                {{salaryNeed | keepTwoNum}}
                <i  class="icon-dropdowm" v-if="isShowIcon"></i>
                <i   v-if="!isShowIcon"></i>
            </span>
        </div>
        <div  :class="{'collapse':!showDetail,'expand':showDetail}" class="content">
            <slot name="content">
            </slot>
        </div>


    </div>
</div>

</template>
<script>
export default {
    data(){
        return {
            showDetail:false,
        }   
    },
    props:["salaryGet","salaryNeed",'isShowIcon'],
    props:{
        salaryGet:{

        },
        salaryNeed:{

        },
        curreny:{

        },
        isShowIcon:{
            default:true,
        }
    },
    methods:{
        collpse:function(){
            this.showDetail= !this.showDetail;
        }
    },
    filters:{
        keepTwoNum: function(value) {
            if (!value) {
                return 0.00;
            }
            var value=Math.round(parseFloat(value)*100)/100;
            var xsd=value.toString().split(".");
            if(xsd.length==1){
                value=value.toString()+".00";
                return value;
            }
            if(xsd.length>1){
                if(xsd[1].length<2){
                    value=value.toString()+"0";
                }
                return value;
            }
        }
    }
}
</script>

<style lang="less" scoped>
   .detail-container{
       
       padding-bottom:0.2rem;
       background-color:#f3f3f3;
       
   }
   .detail-total{
    //   height:1.4rem;
    //   border-radius:0.1rem;
    //   margin: 0.2rem auto;
      font-size:0.32rem;
      background-color:#fff;
   
      >div:first-child{
        height:1rem;
        line-height:1rem;
        // margin:0.2rem auto;

        span.cont1{
          float:left;
        //   display: inline-flex;
          // justify-content: space-between;
          width:54%;
          text-align:center;
          // flex:1;
        }
        span.cont2{
          float:left;
        //   display: inline-flex;
          // justify-content: space-between;
          width:46%;
          text-align:center;
          // flex:1;
        }
        span.cont1{
            text-align:left;
            i{
                margin:auto 0.2rem auto 0.34rem;
                color:#aaa;
            }
        }        
        span.cont2{
            text-align:right;
            i{
                margin:auto 0.34rem auto 0.2rem;
                color:#aaa;
            }
            i:not(.icon-dropdowm){
                margin:auto 0.64rem auto 0.2rem;
                color:#aaa;
            }
        }    
      }
      div:first-child{
          background-color:#fff;
      }
      div:not(:first-child){
            clear: both;
            overflow:hidden;
            >div div:not(.tax){
                line-height:1rem;
                height:1rem;
                clear: both;
                overflow:hidden;
            }
            span{
                float:left;
                //   display: inline-flex;
                // justify-content: space-between;
                width:60%;
                // text-align:center;
                // flex:1;

            }
            span.tax-title{
                color:#007de4;
            }
            span:first-child{
                text-align:left;
                padding-left:0.8rem;
            }        
            span:nth-child(2){
                text-align:right;
                padding-right: 0.96rem;
            }   
      }

      div.collapse{
        max-height: 0;
        overflow: hidden;
        transition: all 0.8s ;          
      }
      div.expand{
        max-height: 20rem;
        overflow: hidden;
        transition: all 0.8s ;            
      }
   }

</style>
